<template>
	<rui-card title="目的地推荐" tips="当季最热目的地推荐">
		<view class="mdd-index">
			<view class="mdd-index_item" v-for="index in 6" :key="index">
				<image class="mdd-index_item_img" src="/static/images/lines.jpg" mode=""></image>
				<view class="mdd-index_item_name">
					乌鲁木齐
				</view>
			</view>
		</view>
	</rui-card>
	
</template>

<script>

</script>

<style lang="scss" scoped>
	.mdd-index {
		display: flex;
		flex-wrap: wrap;

		&_item {
			width: calc(33.3% - 12rpx);
			height: 180rpx;
			margin: 6rpx;
			overflow: hidden;
			border-radius: 10rpx;
			position: relative;

			&_name {
				position: absolute;
				width: 100%;
				bottom: 0;
				left: 0;
				text-align: center;
				color: #fff;
				font-weight: bold;
				padding: 15rpx 0;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
			}

			&_img {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>